<template>
    <div>
        <ul>
            <!-- 
                想让谁重复生成 就给谁加 v-for
                v-for="(item,index) in 数组"
                item：数组循环后每条数据
                index：每条数据的下标

                key的作用：
                key表示的是唯一，不加key会报警告，作用是更高效的更细虚拟dom，
                目的是让vue区分它们，有利于代码优化，减少资源消耗
            -->
            <li v-for="(item, index) in data" :key="index">
                {{ item.name }} --- {{ index.age }}---{{ item.sex }}---{{ index }}
            </li>
        </ul>

        

        <table border="1" align="center">
            <thead>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </thead>
             <tr v-for="(item,index) in data" :key="index">
                    <td>{{ index + 1 }} </td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.sex }}</td>
            </tr>
        </table>
    </div>    
</template>
<script>
    export default{
        data(){
            return {
                data:[
                    {
                        name:"孙悟空",
                        age:200,
                        sex:"男"
                    },
                     {
                        name:"撒旦",
                        age:1100,
                        sex:"男"
                    },
                     {
                        name:"猪八戒",
                        age:100,
                        sex:"男"
                    },
                     {
                        name:"白骨精",
                        age:20000,
                        sex:"女"
                    },
                ]
            }
        },
        methods:{

        },
    }
</script>